<template>
  <ve-histogram :data="chartData" :extend="extend" height="320px"></ve-histogram>
</template>

<script>
export default {
  data() {
    this.extend = {
      legend: {
        show: false
      },
      grid: {
        top: 20
      },
      yAxis: {
        show: false
      },
      barWidth: 70,
      itemStyle: {
        barBorderRadius: 4,
        shadowColor: "rgba(0, 0, 0, 0.5)",
        shadowBlur: 5,
        shadowOffsetX: 5,
        shadowOffsetY: -1
      },
      label: { 
        show: true, 
        position: "top" ,
        formatter:'{@score}%',
        color:'#999'
      },
      series: {
        itemStyle: {
          normal: {
            color: function(params) {
              var colorList = [
                "#c473fc","#a8ddff","#61efd9","#53bcff"
              ];
              return colorList[params.dataIndex];
            }
          }
        }
      }
    };
    return {
      chartData: {
        columns: ["age", "访问用户"],
        rows: [
          { "age": "18-25", 访问用户: 55 },
          { "age": "26-30", 访问用户: 35 },
          { "age": "31-25", 访问用户: 23 },
          { "age": "36-40", 访问用户: 17 }
        ]
      }
    };
  }
};
</script>